// pages/index.tsx
import React from 'react';
import CommonCharts from '@ray-js/common-charts';
import {View,navigateTo} from '@ray-js/ray'
import styles from './index.module.less'



export default function PieChart(props) {

    return(
        <>
            <View className={styles.piechart}>
                <CommonCharts
                option={{
                    tooltip: {
                        trigger: 'item',
                        show:false,
                        // formatter: '{b}\n{d}% | {c}',
                    },
                    legend: {
                        show:false,
                    },
                    series: [
                        {
                        name: 'Radius Mode',
                        type: 'pie',
                        radius: '70%',
                        center: ['50%', '25%'],
                        roseType: 'radius',
                        itemStyle: {
                            borderRadius: 2
                        },
                        label: {
                            show: false,
                            position: 'inside',
                            formatter: '{b}\n{d}% | {c}',
                        },
                        
                        emphasis: {
                            label: {
                            show: false
                            }
                        },
                        data: [
                            { value: 70, name: '类型9',itemStyle: { color: props.color9 } },
                            { value: 65, name: '类型8',itemStyle: { color: props.color8 } },
                            { value: 60, name: '类型7',itemStyle: { color: props.color7 } },
                            { value: 55, name: '类型6',itemStyle: { color: props.color6 } },
                            { value: 50, name: '类型5',itemStyle: { color: props.color5 } },
                            { value: 45, name: '类型4',itemStyle: { color: props.color4 } },
                            { value: 40, name: '类型3',itemStyle: { color: props.color3 } },
                            { value: 35, name: '类型2',itemStyle: { color: props.color2 } },
                            { value: 30, name: '类型1',itemStyle: { color: props.color1 } },
                        ]
                        },
                
                    ]
                }} // Echarts 配置项
                />
            </View>
        </>
    )
}